<template>
    <div class="page">
        <div class="header">
            <NavBar :isArrow="false" :border="false" :fixed="false"/>
            <!-- 个人信息 -->
            <div class="flex-row flex-start m-l-20 m-t-20">
                <div class="avatar w-60 h-60 border-radius-12"></div> 
                <div class="h-60 color-white m-l-20 font-14 flex-column flex-around flex-l-start">
                    <div>小白</div>
                    <div>ID:9547</div>
                </div>
            </div>
            <!-- vip -->
            <div class="w-335 h-106 vip flex-column flex-start flex-l-start">
                <div class="m-x-auto m-l-20">
                    <div class="font-18 color-white p-b-5 flex-row flex-start LV">
                        <div class="flex-row flex-start flex-l-baseline">
                            <div>LV</div>
                            <div class="font-25">1</div>
                        </div>
                        <div class="member">会员</div>    
                    </div>
                    <van-progress :percentage="50" stroke-width="6" 
                        track-color="#5756B3" color="#FFFFFF" :show-pivot="false"
                        class="w-220"
                    />
                    <div class="flex-row font-10 color-white p-t-5">
                        <div>还差9547点经验值可升级</div>
                        <div>v1</div>
                    </div>
                </div>
                <img class="w-56 h-65" src="@/assets/images/my/vip.png"/>
            </div>
        </div>

         <!-- 金刚栏 -->
        <div class="m-t-20">
            <van-grid :border="false" :column-num="4" square>
                <van-grid-item v-for="(item,index) in itemList" :key="index">
                    <div class="font-18 font-w-250">{{item.value}}</div>
                    <div class="font-14 font-w-250 m-t-8">{{item.name}}</div>
                </van-grid-item>
            </van-grid>
        </div>

        <!-- 我的订单 -->
        <div class="m-l-20 m-r-20">
            <div class="font-18 tip">我的订单</div>
            <van-grid :border="false" :column-num="myOrderList.length" square>
                <van-grid-item v-for="(item,index) in myOrderList" :key="index">
                    <van-image width="20" height="20" fit="contain" :src="getImageUrl(item.url)" />
                    <div class="font-12 m-t-10">{{item.name}}</div>
                </van-grid-item>
            </van-grid>
        </div>

        <!-- banner -->
        <div class="m-t-20 m-b-20 m-l-20 m-r-20">
            <Banner :bannerList="bannerList"/>
        </div>
    
        <!--cell  -->
        <div class="cell">
            <van-cell is-link>
                 <template #title>
                    <div class="flex-row flex-start">
                        <van-image width="20" height="20" fit="contain" :src="getImageUrl('/images/my/dz.png')" />
                        <span class="custom-title font-14 font-w-500 p-l-20 p-r-20">收货地址</span>
                    </div>
                </template>
            </van-cell>
            <van-cell is-link>
                 <template #title>
                    <div class="flex-row flex-start">
                        <van-image width="20" height="20" fit="contain" :src="getImageUrl('/images/my/yhq.png')" />
                        <span class="custom-title font-14 font-w-500 p-l-20 p-r-20">优惠券</span>
                    </div>
                </template>
            </van-cell>
            <van-cell is-link>
                 <template #title>
                    <div class="flex-row flex-start">
                        <van-image width="20" height="20" fit="contain" :src="getImageUrl('/images/my/lsdd.png')" />
                        <span class="custom-title font-14 font-w-500 p-l-20 p-r-20">历史订单</span>
                    </div>
                </template>
            </van-cell>
        </div>
        
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import Banner from '@/components/Banner/index.vue';
    //name 为图片的名称 包含 图片后缀
    const getImageUrl = (name:string) => {
        return new URL(`../../assets/${name}`, import.meta.url).href;
    }
    const bannerList =[{
        imageUrl:'/images/my/banner.png',
        width:285,
        height:90
    },{
        imageUrl:'/images/my/banner.png',
        width:285,
        height:90
    }]

    const itemList =ref([
        {
            name:'余额',
            value:38
        },
        {
            name:'积分',
            value:382
        },
        {
            name:'收藏',
            value:38888
        },
        {
            name:'优惠',
            value:38
        },
    ])
    const myOrderList = ref([
        {
            url:'/images/my/dfk.png',
            name:'待付款'
        },
        {
            url:'/images/my/dfh.png',
            name:'待发货'
        },
        {
            url:'/images/my/dsh.png',
            name:'待收货'
        },
        {
            url:'/images/my/dpj.png',
            name:'待评价'
        },
        {
            url:'/images/my/tk.png',
            name:'退货/款'
        }

    ])
</script>
<style lang="scss" scoped>
.page{
    height: 100%;
}
.header{
    position:relative;
    width: 100%;
    height: 279px;
    background: url(@/assets/images/my/bg.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    .avatar{
        background: #fed869;
    }
    .vip{
        position: absolute;
        bottom: 0px;
        left:50%;
        transform: translateX(-50%);
        background: url(@/assets/images/my/vip-bg.png) no-repeat;
        background-size: 100% 100%;
        .LV{
            letter-spacing: 5px;
            .member{
                letter-spacing: 0px;
                font-size:12px;
                color:#E7BDD3;
            }
        }

        img{
            position: absolute;
            bottom: -4px;
            right: 14px;
        }
    }
}
  .my-swipe .van-swipe-item {
    height: 159px;
    // background-color: #39a9ed;
    background-color: #FFFFFF;
    border-radius:10px;

  }
.tip{
    font-weight: bold;
    margin: 20px 0;
}
.cell{
    img{
        width: 20px;
        height: 20px;
    }
}
</style>